<template>
	<div style="padding: 8px;background-color: #fff;border: 1px solid lightgray;">
		<div>
			<el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable size="mini"></el-input>
		</div>

		<div style="height: 80vh;overflow: auto;margin-top: 8px;">
			<el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all
				:filter-node-method="filterNode" ref="tree" node-key="cmdId" show-checkbox check-strictly
				@check-change="handleNodeClick">
			</el-tree>
		</div>
	</div>
</template>

<script>
	import {
		getZlTree
	} from '@/api/ywgl.js'


	export default {
		name: 'zlTree',
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		data() {
			return {
				filterText: '',
				treeData: [],
				defaultProps: {
					children: 'children',
					label: 'cmdName'
				},
				checkedId:''
			}
		},
		methods: {

			handleNodeClick(data, checked, node) {
				if (checked === true) {
					this.checkedId = data.cmdId;
					this.$refs.tree.setCheckedKeys([data.cmdId]);
					if(!data.children){
						var pNode=this.$refs.tree.getNode(data.parentId)
						var text=data.cmdName
						if(pNode){
							text=pNode.data.cmdName+' >> '+data.cmdName
						}
						
						this.$emit("on-select",{
							title:text,
							param:data
						})
					}
				} else {
					if (this.checkedId ===data.cmdId) {
						this.$refs.tree.setCheckedKeys([data.cmdId]);
						
					}
				}
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.cmdName.indexOf(value) !== -1;
			},
			init() {
				getZlTree().then(res => {
					if (res.code === 200) {
						this.treeData = res.data
					}
				})
			}
		},
		mounted() {
			this.init()
		}


	}
</script>

<style>
</style>